import { FC, useState } from "react";
import { useLocation } from "react-router-dom";
import { Card, Divider, Space, Tag, Typography, Button, Modal,Popconfirm, message } from 'antd';
import { deleteQuestion,CopyQuestion,changeQuestion } from "../../service";
import { Link, useNavigate } from "react-router-dom";
import { StarOutlined, BarChartOutlined, EditOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons'
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { QuestionCardType } from "../../pages/QuestionPages";
import { useRequest } from "ahooks";
const CBN = classnames.bind(style)
const { Paragraph } = Typography
const { confirm } = Modal;
const QuestionCard: FC<QuestionCardType> = (props) => {
    const { _id, title, count, ispublished, start, createTime, deleted } = props
    const navPath = ispublished ? `/question/edit/${_id}` : `/question/stat/${_id}`
    const {pathname} = useLocation()
    const nav = useNavigate()
    //复制问卷
    const { run: copyQuestionItem, loading:copyQuestionItem_loading } = useRequest((id: string) => {
        return CopyQuestion(id)
    }, {
        manual: true,
        onSuccess(data) {
            message.info('复制成功')
            nav(`/question/edit/${_id}`)
        },
    })

    const copyQuestion = () => {
        confirm({
            icon: null,
            content: <p>确定复制？</p>,
            okText: '确定',
            cancelText: '取消',
            onOk() {
                copyQuestionItem(_id)
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    //标星
    const [isstart, setisstart] = useState(start);
    const { run: startQuestionItem, loading:startQuestionItem_loading } = useRequest((id: string) => {
        return changeQuestion(id)
    }, {
        manual: true,
        onSuccess() {
            setisstart(!isstart)
            message.info('标星成功')
        },
    })

    //判断是否删除
    const [isdeleted, setisdeleted] = useState(deleted);
    const { run: deleteQuestionItem, loading:deleteQuestionItem_loading } = useRequest((id: string) => {
        return deleteQuestion(id)
    }, {
        manual: true,
        onSuccess() {
            setisdeleted(true)
            message.info('删除成功')
        },
    })
    if(pathname.startsWith('/manage/start')){
        if(!isstart){
            return null
        }
    }
    if (isdeleted) return null
    return <Card className={CBN('QuestionCard')}>
        <div className={CBN('top')}>
            <Space>
               
                {isstart ? <StarOutlined style={{ color: 'red' }} /> : null}
                <Link to={navPath}>{title}</Link>
            </Space>

            <Space>
                <Tag color={ispublished ? 'success' : 'default'}>{ispublished ? '已发布' : '未发布'}</Tag>
                <Paragraph style={{ margin: 0 }}>答卷:{count}</Paragraph>
                <Paragraph style={{ margin: 0 }}>创建时间:{createTime}</Paragraph>
            </Space>
        </div>
        <Divider style={{ margin: '10px 0' }}></Divider>
        <div className={CBN('mid')}>
            <Space>
                <Button size="small" onClick={() => { nav(navPath) }} icon={<EditOutlined></EditOutlined>} disabled={!ispublished}>编辑问卷</Button>
                <Button size="small" onClick={() => { nav(navPath) }} icon={<BarChartOutlined></BarChartOutlined>} disabled={ispublished}>统计问卷</Button>
            </Space>

            <Space>
                <Button onClick={()=>{
                    startQuestionItem(_id)
                }} disabled = {startQuestionItem_loading} size="small" icon={!isstart ? <StarOutlined style={{ color: 'red' }}></StarOutlined> : null}>{isstart ? '取消标星' : '标星'}</Button>
                <Button size="small" disabled ={copyQuestionItem_loading} onClick={copyQuestion} icon={<CopyOutlined></CopyOutlined>}>复制</Button>
                <Popconfirm
                    title="确认删除？"
                    onConfirm={()=>{
                        deleteQuestionItem(_id)
                    }}
                    okText="是"
                    cancelText="否"
                >
                    <Button disabled = {deleteQuestionItem_loading} size="small" icon={<DeleteOutlined></DeleteOutlined>}>删除</Button>
                </Popconfirm>
                
            </Space>
        </div>
    </Card>
}

export default QuestionCard